<template>
  <div class="user_cash">
    <ContentBox title="立即提现" @left="back" :fixed="true" :ostyle="style" titlecolor="block">
      <template slot="oleft"><van-icon color="#000" name="arrow-left"/></template>
    </ContentBox>
    <notice :top="$remToPx('0.88')"></notice>
    <div class="wrapper">
      <div class="list">
        <div class="item acea-row row-between-wrapper">
          <div class="name">持卡人</div>
          <div class="input">
            <input placeholder="请输入持卡人姓名" v-model="post.name" />
          </div>
        </div>
        <div class="item acea-row row-between-wrapper">
          <div class="name">卡号</div>
          <div class="input">
            <input placeholder="请填写卡号" v-model="post.cardnum" />
          </div>
        </div>
        <div class="item acea-row row-between-wrapper">
          <div class="name">银行</div>
          <div class="input">
            <select v-model="post.bankname">
              <option value="">请选择银行</option>
              <option
                v-for="(item, index) in bank"
                :key="index"
                :value="item"
                >{{ item }}</option
              >
            </select>
          </div>
        </div>
        <div class="item acea-row row-between-wrapper">
          <div class="name">提现</div>
          <div class="input">
            <input
              placeholder="最低提现金额"
              v-model="post.money"
            />
          </div>
        </div>
        <div class="tip">当前可提现金额: {{mData.commissionCount}}</div>
        <div class="bnt" @click="save">提现</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      style: {
        backgroundColor: '#f6f6f6'
      },
      post: {
        extract_type: 'bank',
        money: '',
        name: '',
        bankname: '',
        cardnum: ''
      },
      bank: '',
      mData: ''
    }
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    getBank () {
      this.$axios.get('/api/extract/bank').then(res => {
        this.bank = res.data.extractBank
      })
    },
    getData () {
      this.$axios.get('/api/commission').then(res => {
        if (res.status === 200) {
          this.mData = res.data
        }
      })
    },
    save () {
      if (this.post.name === '') {
        this.$toast('请填写持卡人姓名')
        return
      }
      if (this.post.cardnum === '') {
        this.$toast('请填写银行卡号')
        return
      }
      if (this.post.bankname === '') {
        this.$toast('请选择银行')
        return
      }
      if (this.post.money === '' || parseFloat(this.post.money) > parseFloat(this.mData.commissionCount)) {
        this.$toast('请填写正确的提现金额')
        return
      }
      if (this.post.money <= 0) {
        this.$toast('提现金额不能为0')
        return
      }
      this.$axios.post('/api/extract/cash', this.post).then(res => {
        if (res.status === 200) {
          this.$toast.success('提现申请提交成功')
          this.$router.go(-1)
        } else {
          this.$toast(res.msg)
        }
      })
    }
  },
  created () {
    this.getData()
    this.getBank()
  }
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
